<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    
    <!-- 搜索框 -->
    <view class="search-container">
      <view class="search-box">
        <!-- <image src="/static/images/search.png" mode="aspectFit" class="search-icon"></image> -->
				<uni-icons type="search"></uni-icons>
				
        <input type="text" placeholder="请输入环节名称" class="search-input" v-model="searchKeyword">
        <view class="search-btn" @click="searchOrder">搜索</view>
      </view>
    </view>
    
    <!-- 筛选标签 -->
<!--    <view class="filter-tabs">
      <view class="tab-item" :class="{ active: currentTab === 0 }" @click="changeTab(0)">全部</view>
      <view class="tab-item" :class="{ active: currentTab === 1 }" @click="changeTab(1)">处理中</view>
      <view class="tab-item" :class="{ active: currentTab === 2 }" @click="changeTab(2)">已完成</view>
      <view class="tab-item" :class="{ active: currentTab === 3 }" @click="changeTab(3)">已关闭</view>
    </view> -->
    
    <!-- 环节列表 -->
    <view class="order-list" v-if="linkList.length > 0">
      <view class="order-item" v-for="(order, index) in linkList" :key="index" @click="viewOrderDetail(order.id)">
        <view class="order-header">
          <text class="order-id">环节编号: {{ order.id }}</text>
          <text class="order-status" :class="getStatusClass(2)">{{ getStatusText(order.status) }}</text>
        </view>
        <view class="order-content">
          <text class="order-title">{{ order.linkName }}</text>
          <text class="order-time">{{ order.createTime }}</text>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <!-- <image src="/static/images/empty.png" mode="aspectFit" class="empty-icon"></image> -->
			<!-- <uni-icons type="search"></uni-icons> -->
      <text class="empty-text">暂无环节记录</text>
    </view>
  </view>
</template>

<script>
import request from '/utils/request.js';
import { isEmpty } from '/utils/utils.js'
	
export default {
  data() {
    return {
      searchKeyword: '',
      currentTab: 0,
      linkList: []
    }
  },
	mounted() {
		uni.showLoading({
		  title: '搜索中...'
		})
		this.getLinkList()
	},
  methods: {
		getLinkList() {
			request.get('/system/link/list', {linkName: this.searchKeyword}).then(res => {
			  uni.hideLoading()
			  if (res.code === 200) {
			    this.linkList = res.rows
			  } else {
			    uni.showToast({
			      title: res.msg,
			      icon: 'none'
			    })
			  }
			})
		},
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 搜索环节
    searchOrder() {
      // 搜索逻辑
      uni.showLoading({
        title: '搜索中...'
      })
      this.getLinkList()
      // setTimeout(() => {
      //   uni.hideLoading()
      //   // 这里可以根据searchKeyword筛选linkList
      //   if (!this.searchKeyword.trim()) {
      //     uni.showToast({
      //       title: '请输入环节编号',
      //       icon: 'none'
      //     })
      //   }
      // }, 800)
    },
    
    // 切换标签
    changeTab(index) {
      this.currentTab = index
      // 根据标签筛选环节
      // 实际项目中这里会根据状态筛选linkList
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        0: '全部',
        1: '处理中',
        2: '已完成',
        3: '已关闭'
      }
      return statusMap[status] || '已生效'
    },
    
    // 获取状态样式
    getStatusClass(status) {
      const statusClassMap = {
        1: 'status-processing',
        2: 'status-completed',
        3: 'status-closed'
      }
      return statusClassMap[status] || ''
    },
    
    // 查看环节详情
    viewOrderDetail(orderId) {
      uni.navigateTo({
        url: `/pages/workorder/form?id=${orderId}`
      })
    }
  }
}
</script>

<style>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
}

/* 导航栏样式 */
.navbar {
  height: 100rpx;
  background-color: #007AFF;
  color: #fff;
  display: flex;
  align-items: center;
  position: relative;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.navbar-back {
  position: absolute;
  left: 30rpx;
  width: 60rpx;
  height: 100rpx;
  display: flex;
  align-items: center;
}

.back-icon {
  width: 24rpx;
  height: 40rpx;
}

.navbar-title {
  width: 100%;
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  letter-spacing: 2rpx;
}

/* 搜索框 */
.search-container {
  padding: 20rpx 30rpx;
  background-color: #fff;
}

.search-box {
  height: 80rpx;
  background-color: #f5f5f5;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
}

.search-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 20rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #666;
  height: 100%;
}

.search-btn {
  width: 120rpx;
  text-align: center;
  font-size: 28rpx;
  color: #007AFF;
}

/* 筛选标签 */
.filter-tabs {
  display: flex;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.tab-item {
  flex: 1;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #007AFF;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 6rpx;
  background-color: #007AFF;
  border-radius: 3rpx;
}

/* 环节列表 */
.order-list {
  padding: 0 30rpx;
}

.order-item {
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  padding: 25rpx 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.order-id {
  font-size: 26rpx;
  color: #333;
}

.order-status {
  font-size: 24rpx;
  padding: 6rpx 16rpx;
  border-radius: 18rpx;
}

.status-processing {
  background-color: #FFF7E6;
  color: #FF7D00;
}

.status-completed {
  background-color: #E8FFF3;
  color: #00B42A;
}

.status-closed {
  background-color: #F2F3F5;
  color: #86909C;
}

.order-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-title {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  max-width: 450rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-time {
  font-size: 24rpx;
  color: #999;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 600rpx;
}

.empty-icon {
  width: 240rpx;
  height: 240rpx;
  margin-bottom: 40rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>    